<template>
  <el-form-item class="edit-item edit-item-input input-normal">
    <slot name="label">
      <label>
        {{label}}
        <tooltip-common v-if="getTooltips" :tooltips="getTooltips"></tooltip-common>
      </label>
    </slot>
    <el-input
      style="flex: 1;"
      :type="type"
      :disabled="toBool(disabled)"
      :model-value="props.modelValue"
      :placeholder="placeholder"
      @input="onChange($event)">
        <template #prefix>
          <i class="">{{unit}}</i>
        </template>
    </el-input>
  </el-form-item>
</template>


<script setup lang="ts">
import TooltipCommon from './tooltip-common.vue'

interface Props {
  modelValue: string | number,
  label: string,
  tooltips?: string,
  placeholder?: string,
  maxLength?: number,
  type?: string,
  disabled?: boolean,
  unit?: string
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  tooltips: '',
  placeholder: '',
  maxLength: 100,
  type: 'text',
  disabled: false,
  unit: ''
})


// const modelValue_ = ref(props.modelValue)
const tooltips = props.tooltips
const placeholder = props.placeholder

const getTooltips = computed(() => {
  return !tooltips && placeholder ? placeholder : tooltips
})

const emit = defineEmits(['change','update:modelValue'])

const onChange = (val: string) => {
  emit('update:modelValue', val)
  emit('change', val)
}
const toBool = (val: boolean) => {
  return typeof val === "boolean" ? val  : val === "true" ? true : false
}
</script>
